<extend name="Public/base" />
<block name="body">
<div class="wrap_w">
  <div class="crumbs"><em>当前位置：</em><a href="{:U('Subscriber/record')}">用户中心</a>
  </div>
  <div id="member" class="clearfix">
    <div id="member_l">
      <include file='Base' />
    </div>
    
    <div id="member_r">
        <div class="other_s">
            <h3 class="clearfix"><span>绑定手机</span></h3>
            <link rel="stylesheet" href="__CSS__/safe.css" />
        <notempty name="phone">
            <p style="line-height:32px;color:red;font-size:20px;padding-top:31px;text-align:center;">你已绑定过手机，若需更改，请先解绑后再行绑定。如已遗失绑定手机，请联系<a href="{:U('Service/index')}" style="color:green;">客服</a>进行更改。</p>
            <div class="binded-wrap" id="obd">
                <form action="">
                    <span id="obdnotice" class="notice"></span>
                    <div class="form-item">
                        <label>手机号码：</label>
                        <div class="input-optimize correct">
                            <span id="obdphone">{$phone}</span>
                        </div>
                    </div>
                    <div class="form-item check-code-wrap">
                        <label>验证码：</label>
                        <div class="input-optimize correct">
                            <input type="text" class="js-vcode" id="obdvcode" name="vcode">
                            <img src="{:U('verify?vid=4')}" alt="" class="obdcheckcode" >
                            <span class="error-msg"></span>
                        </div>
                    </div>
                    <div class="form-item">
                        <a href="#" class="send-code" id="obdsendSafeCode">发送安全码</a>
                        <span class=""></span>
                    </div>
                    <div class="form-item">
                        <label>手机安全码：</label>
                        <div class="input-optimize correct">
                            <input type="text" class="js-scode" id="obdscode" name="scode" >
                            <span class="error-msg"></span>
                        </div>
                    </div>
                    <div class="operation-bar">
                        <a href="#" class="confirm" id="obdbwbtn">解绑</a>
                    </div>
                </form>           
            </div>
            <script>
                $(function() {
                    $('.obdcheckcode').on('click',function() {
                        $(this).attr('src','__MODULE__/Member/verify/vid/4/t/'+(new Date).getTime());
                    });
                    
                    $('#obdsendSafeCode').on('click',function() {
                        var phone = $.trim($('#obdphone').text()),
                            jvcode =$('#obdvcode'), vcode = $.trim(jvcode.val()),
                            that = $(this);
                        if (vcode == ''){jvcode.siblings('.error-msg').text('必填项');return false;}
                        
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            data:'phone='+phone+'&verify='+vcode+'&vid=4',
                            url:'{:U("sendvcode")}',
                            success:function(data) {
                                switch (parseInt(data.status)) {
                                    case 1: {
                                        $('#obdvcode').siblings('.error-msg').text('');
                                        that.siblings('span').removeClass('error-msg').addClass('right-msg').text(data.msg);                            
                                    };break;   
                                    case 2: {
                                        that.siblings('span').text('');
                                        $('#obdvcode').siblings('.error-msg').text(data.msg); $('.checkcode').click();
                                    };break;
                                    default: 
                                        $('#obdvcode').siblings('.error-msg').text(''); $('.checkcode').click();
                                        that.siblings('span').removeClass('right-msg').addClass('error-msg').text(data.msg);                            
                                }
                            },
                            error:function() {
                                alert('服务器故障，请稍候再试。。。。');
                            }
                        });
                        
                    });
                    
                    $('#obdbwbtn').on('click',function() {
                        var phone = $.trim($('#obdphone').text()),
                            jscode =$('#obdscode'), scode = $.trim(jscode.val()),                   
                            that = $(this);
                        if (scode == ''){jscode.siblings('.error-msg').text('必填项');return false;}
                                        
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            data:'vcode='+scode+'&phone='+phone,
                            url:'{:U("changeph")}',
                            success:function(data) {
                                if (parseInt(data.status) == 1 ) {
                                    $('#obdnotice').removeClass('fail').addClass('success').text(data.msg);
                                    setTimeout(function() {
                                        $('#obd').addClass('hidden');
                                        $('#bw').removeClass('hidden');
                                    },2000);
                                } else {
                                    $('#obdnotice').removeClass('success').addClass('fail').text(data.msg);
                                }
                            },
                            error:function() {
                                alert('服务器故障，请稍候再试。。。。');
                            }
                        });
                    });
                    
                });
            </script>
        <else />
            <div class="m-allineone-validatePass" id="mav">
                <div class="validate-pass-wrap">
                    <span id="notice1" class="notice"></span>
                    <p class="tips">该操作需要验证登录密码</p>
                    <div class="input-optimize">
                        <input type="password" style="display: none;">
                        <input type="password" class="pass-input" id="validatePass" >
                        <span class="error-msg"></span>
                    </div>
                    <div class="operation-bar">
                        <a href="#" class="confirm" id="mavbtn">确定</a>
                    </div>
                </div>
            </div>
                      
            <script>
                $(function() {
                    $('#mavbtn').on('click',function() {
                        var jvp = $('#validatePass'),vp = $.trim(jvp.val());
                        if (vp == '') {$('.error-msg').text('必填项');return false;}
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            data:'pwd='+vp,
                            url:'{:U("safe")}',
                            success:function(data) {
                                if (parseInt(data.status) == 1 ) {
                                    //jvp.siblings('.error-msg').text('密码正确，正在跳转。。。');
                                    $('#notice1').removeClass('fail').addClass('success').text('密码正确，正在跳转。。。');
                                    setTimeout(function() {
                                        $('#mav').addClass('hidden');
                                        $('#bw').removeClass('hidden');
                                    },1000);
                                } else {
                                    //jvp.siblings('.error-msg').text('密码错误');
                                    $('#notice1').removeClass('success').addClass('fail').text('密码错误');
                                }
                            },
                            error:function() {
                                alert('服务器故障，请稍候再试。。。。');
                            }
                        });
                    });
                
                
                
                    
                });
            </script>
        </notempty>
            <div class="binded-wrap hidden" id="bw">
                <form action="">
                    <span id="notice" class="notice"></span>
                    <div class="form-item">
                        <label>手机号码：</label>
                        <div class="input-optimize correct">
                            <input type="text" id="phone" name="phone" >
                            <span class="error-msg"></span>
                        </div>
                    </div>
                    <div class="form-item check-code-wrap">
                        <label>验证码：</label>
                        <div class="input-optimize correct">
                            <input type="text" class="js-vcode" id="vcode" name="vcode">
                            <img src="{:U('verify?vid=3')}" alt="" class="checkcode" >
                            <span class="error-msg"></span>
                        </div>
                    </div>
                    <div class="form-item">
                        <a href="#" class="send-code" id="sendSafeCode">发送安全码</a>
                        <span class=""></span>
                    </div>
                    <div class="form-item">
                        <label>手机安全码：</label>
                        <div class="input-optimize correct">
                            <input type="text" class="js-scode" id="scode" name="scode" >
                            <span class="error-msg"></span>
                        </div>
                    </div>
                    <div class="operation-bar">
                        <a href="#" class="confirm" id="bwbtn">确定</a>
                        <a href="" class="cancel">取消</a>
                    </div>
                </form>           
            </div>
            <script>
                $(function() {
                    $('.checkcode').on('click',function() {
                        $(this).attr('src','__MODULE__/Member/verify/vid/3/t/'+(new Date).getTime());
                    });
                    $('.input-optimize input').on('blur',function() {
                        var val = $(this).val();
                        if (val == ''){$(this).siblings('.error-msg').text('必填项');return;} else {$(this).siblings('.error-msg').text('');}                
                        if ($(this).attr('id') == 'phone') {
                            if (val.length !== 11 || !(/^[1][358][0-9]{9}/.test(val))) {
                                $(this).siblings('.error-msg').text('手机格式不正确');return;
                            } else {
                                $(this).siblings('.error-msg').text('');
                            }
                        }
                    });
                    $('#sendSafeCode').on('click',function() {
                        var jphone = $('#phone'),phone = $.trim(jphone.val()),
                            jvcode =$('#vcode'), vcode = $.trim(jvcode.val()),that = $(this);
                        if (phone == '') {jphone.siblings('.error-msg').text('必填项');return false;}
                        if (phone.length !== 11 || !(/^[1][358][0-9]{9}$/.test(phone))) {jphone.siblings('.error-msg').text('手机格式不正确');return false;}
                        if (vcode == ''){jvcode.siblings('.error-msg').text('必填项');return false;}
                        
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            data:'phone='+phone+'&verify='+vcode+'&vid=3',
                            url:'{:U("sendvcode")}',
                            success:function(data) {
                                switch (parseInt(data.status)) {
                                    case 1: {
                                        $('#vcode').siblings('.error-msg').text('');
                                        that.siblings('span').removeClass('error-msg').addClass('right-msg').text(data.msg);                            
                                    };break;   
                                    case 2: {
                                        that.siblings('span').text('');
                                        $('#vcode').siblings('.error-msg').text(data.msg); $('.checkcode').click();
                                    };break;
                                    default: 
                                        $('#vcode').siblings('.error-msg').text(''); $('.checkcode').click();
                                        that.siblings('span').removeClass('right-msg').addClass('error-msg').text(data.msg);                            
                                }
                            },
                            error:function() {
                                alert('服务器故障，请稍候再试。。。。');
                            }
                        });
                        
                    });
                    $('#bwbtn').on('click',function() {
                        var jphone = $('#phone'),phone = $.trim(jphone.val()),
                            jscode =$('#scode'), scode = $.trim(jscode.val()),                   
                            that = $(this);
                        if (phone == '') {jphone.siblings('.error-msg').text('必填项');return false;}
                        if (phone.length !== 11 || !(/^[1][358][0-9]{9}$/.test(phone))) {jphone.siblings('.error-msg').text('手机格式不正确');return false;}
                        if (scode == ''){jscode.siblings('.error-msg').text('必填项');return false;}
                                        
                        $.ajax({
                            type:'post',
                            dataType:'json',
                            data:'vcode='+scode+'&phone='+phone,
                            url:'{:U("phone")}',
                            success:function(data) {
                                if (parseInt(data.status) == 1 ) {
                                    $('#notice').removeClass('fail').addClass('success').text(data.msg);
                                    setTimeout(function() {
                                        window.location.reload();
                                    },2000);
                                } else {
                                    $('#notice').removeClass('success').addClass('fail').text(data.msg);
                                }
                            },
                            error:function() {
                                alert('服务器故障，请稍候再试。。。。');
                            }
                        });
                    });
                    $('.cancel').on('click',function() {
                        window.location.reload();
                    });
                });
            </script>
        </div>
    </div>
    
  </div>
</div>
</block>